<template>
  <div>
    <el-table class="table_el" :data="virtuallist" style="width: auto">
      <el-table-column label="服务器ID" prop="id" width="100" />
      <el-table-column label="创建时间" prop="created_at" width="100" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="statusColor(scope.row.state)">{{
            statusMap(scope.row.state)
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200">
        <template #header>
          <el-input v-model="userPage.key" size="small" placeholder="关键字筛选" style="width: 120px" @blur="findIt" />
        </template>
        <template #default="scope">
          <el-button size="small" :disabled="scope.row.state <= 1" @click="outerVisible(scope.row.id)">
            迁移
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-c m-t-20px">
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="userPage.page"
        :page-size="userPage.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps, defineEmits } from "vue";
import { statusMap, statusColor } from "@/utils/hide";
import { getVirtualList, migrate_disk } from "@/api/virtual";
import { message } from "@/utils/message";
const props = defineProps(["ID", "server_id"]);
const emit = defineEmits(["SetMigrate"]);
onMounted(async () => {
  await getList(userPage);
});
const virtuallist = ref([]);
const getList = async data => {
  await getVirtualList(data).then(res => {
    console.log(res);
    virtuallist.value = res.data.data;
    total.value = res.data.count;
  });
};
const userPage = reactive({
  page: 1,
  count: 10,
  key: "",
  server_id: props.server_id
});

const total = ref(0);
const handlePageSizeChange = async newSize => {
  userPage.count = newSize;
  getList(userPage);
};
const handleCurrentPageChange = async newPage => {
  userPage.page = newPage;
  getList(userPage);
};
const outerVisible = async id => {
  await migrate_disk({ volume_id: props.ID, to_instance_id: id }).then(res => {
    if (res.data.code == 200) {
      message(res.data.data, { type: "success" });
      emit("SetMigrate");
    } else {
      message(res.data.msg, { type: "error" });
    }
  });
};
</script>

<style scoped></style>
